<template>
    <div class="organizer-panel-wrapper">
        <div class="organizer-container">
            <logic-panel
              class="logic-panel-wrapper"
              :context="context"
              :info="info"
              >
            </logic-panel>
        </div>
    </div>
  </template>
  
<script lang="ts">
  import { defineComponent } from 'vue';
  import './index.less'
  import Context from './context'
  import mockDetail from './mock/mockLogicList';
  import LogicPanel from "./components/LogicPanel.vue";

  export default defineComponent({
    name: "LogicSetter",
    components: {
      LogicPanel
    },
    setup() {
      return {
        context: new Context({ logicList: [] }),
        // context: new Context(mockDetail),
        info: undefined,
      };
    },
  });

  </script>
  
  <style>

  /* #app {
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    padding: 2rem;
    font-weight: normal;
  } */
  
  a,
  .green {
    text-decoration: none;
    color: hsla(160, 100%, 37%, 1);
    transition: 0.4s;
  }
  
  .organizer-panel-wrapper {
    width: 100%;
    height: 100%;
    background: #eaecef;
    border: 1px solid #ccc;
  }
  
  .organizer-container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  </style>
  